<template>
	<u-popup v-model="show" mode="bottom" height="auto">
		<view class="my_keyboard">
			<view class="box">
				<view class="tit">
					<text v-if="min>0">当前起订量：{{min}}</text>
					<text v-if="limit>0">当前库存：{{max}}</text>
				</view>
				<view class="input_num flex flex_row_center flex_col_center">
					数量：<input type="text" disabled="" v-model="value" class="get_num">
				</view>
			</view>

			<view class="operate">
				<view class="option">
					<text @click="cancel">取消</text>
					<text @click="confirm">完成</text>
				</view>
				<view class="all_num">
					<view class="sign_num" v-for="(item,index) in number" :key="index" @click="getVal(item)">
						{{item}}
					</view>
					<view class="sign_num custom-icon custom-icon-deleteicon" @click="getVal('x')">
						x
					</view>
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>

	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				index: null,
				show: false,
				value: '',
				number: [1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0],
				min: null, //起订量
				max: null, //库存
				limit: null, //是否限购
			}
		},
		methods: {
			cancel() {
				this.show = false;
				this.value = '';
			},
			open(type, index, min, max, limit) {
				this.index = index;
				this.min = Number(min);
				this.limit = Number(limit);
				this.max = Number(max);
				if (type == 1) {
					//标品，不要小数点
					this.number = [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
				} else {
					this.number = [1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0]
				}
				this.show = true;
			},
			confirm() {
				if (this.value < this.min) {
					uni.showToast({
						title: '不能小于起订量',
						duration: 2000,
						icon: 'none'
					});
				} else if (this.limit > 0 && this.value > this.max) {
					uni.showToast({
						title: '不能大于库存',
						duration: 2000,
						icon: 'none'
					});
				} else {
					this.$emit('confirm', {
						value: this.value,
						index: this.index,
						inventory: this.max
					});
					this.cancel();
				}
			},
			getVal(data) {
				let str = String(data);
				if (data == 'x') {
					this.value = this.value.substring(0, this.value.length - 1);
				} else {
					if (this.value.indexOf('.') >= 0 && data == '.') {
						this.$refs.uToast.show({
							title: '格式不正确',
							type: 'error',
							icon: false
						})
						return;
					}
					this.value += str;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my_keyboard {
		.box {
			background: $white;
			padding: 30rpx;
			margin: 0 100rpx;
			text-align: center;
			border-radius: 5px;

			.tit {
				margin-bottom: 30rpx;

				>text {
					margin-left: 30rpx;
				}
			}

			.input_num {
				// width: 300rpx;
				// height: 100rpx;
				text-align: center;

				.get_num {
					// width: 150rpx;
					border-bottom: 1px solid black;
				}
			}

		}

		.operate {
			margin-top: 100rpx;
		}

		.operate .option {
			display: flex;
			justify-content: space-between;
			padding: 0 20px;
			height: 80rpx;
			background: #F4F4F4;
			align-items: center;
			@extend .padding;
		}

		.all_num {
			display: grid;
			padding: 14rpx 20rpx 60rpx;
			background: rgba(220, 221, 221, 0.8);
			grid-template-columns: repeat(3, 31.3%);
			grid-template-rows: repeat(4, 100rpx);
			grid-gap: 15rpx 3%;
			text-align: center;

			.sign_num {
				line-height: 100rpx;
				background: white;
				border-radius: 5px;
				box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
				font-weight: bold;
			}
		}

	}
</style>
